<template>
	<view class="constellation">
		<!-- 自定义导航栏 -->
		<!-- <uni-nav-bar background-color="#d2dfff"
		 color="#0b2659" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true" height="88rpx">
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					自己
				</view>
				<view class="left_icon">
					<uni-icons color="#0b2659" @click="idcard=!idcard" v-if="idcard" type="down" size="14"></uni-icons>
				    <uni-icons color="#0b2659" @click="idcard=!idcard" v-else type="up" size="14"></uni-icons>
				</view>
			</view>
		 	<view class="right">
		 	<uni-icons color="#0b2659" style="margin-right: 20rpx;" custom-prefix="iconfont" type="icon-shenfenqiehuan" size="20"></uni-icons>
		 	<uni-icons color="#0b2659" custom-prefix="iconfont" type="icon-fenxiang" size="22"></uni-icons>
			</view>
		   </view>
		</uni-nav-bar> -->
		<view  v-if="!auditShow">
			<other></other>
		</view>
		<!-- <view class="flex_row_start_center">
			<view>星座</view>
			<picker mode="selector" :value='index' :range="ranglist" @change="change1">
				<view class="pick_item" >
					<view v-if="consName">{{consName}}</view>
					<view v-else>请选择星座</view>
				</view>
			</picker>
		</view>
		<view class="flex_row_start_center">
			<view>类型</view>
			<picker mode="selector"  :value='index' :range="ranglist2" @change="change2">
				<view class="pick_item " >
					<view v-if="monthType">{{monthType}}</view>
					<view v-else>请选择类型</view>
				</view> 
			</picker>
		</view>
		<view @click="getConstellation" class="constellation_button flex_row_center_center">提交</view> -->
	    <view style="margin-top: 20rpx;" v-if="info">
			<view style="margin-bottom: 10rpx;">
				<view style="font-size: 32rpx;margin-bottom: 8rpx;">总运势</view>
				<view>{{info.all || "无"}} </view>
			</view>
			<view style="margin-bottom: 10rpx;">
				<view style="font-size: 32rpx;margin-bottom: 8rpx;">健康</view>
				<view>{{info.health}}</view>
			</view>
			<view style="margin-bottom: 10rpx;">
				<view style="font-size: 32rpx;margin-bottom: 8rpx;">财运 </view>
				<view>{{info.money}}</view>
			</view>
			<view style="margin-bottom: 10rpx;">
				<view style="font-size: 32rpx;margin-bottom: 8rpx;">事业 </view>
				<view>{{info.work}}</view>
			</view>
			<view style="margin-bottom: 10rpx;">
				<view style="font-size: 32rpx;margin-bottom: 8rpx;">感情 </view>
				<view>{{info.love}}</view>
			</view>
		</view>
	<!--跳转 -->
	<view class="star_box" v-if="auditShow">
		<view  class="star_list" v-if="starimages.length>0">
			 <view @click="toinfo(item)" v-for="(item,index) in starimages" :key="index" class="star_item">
                  <view class="i_cont">
                  	<view class="i_img">
						<uni-icons color="#83c2fa" custom-prefix="iconfont" :type="item.icon" size="50"></uni-icons>
                  		<!-- <image style="width: 200rpx;border-radius: 10rpx;" :src="item.imageUrl" mode="widthFix"></image> -->
                  	</view>
					<view class="i_name">
						{{item.name}}
					</view>
					<view class="i_date">
						{{item.datef}}
					</view>
                  </view>
			 </view>
		</view>
	</view>
	
	</view>
</template>

<script>
	import other from '@/components/other/index.vue'
	export default{
		components:{other},
		data(){
			return{
				consName:'',
				monthType:'',
				monthType1:'',
				ranglist:['水瓶座','双鱼座','白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座'],
				ranglist2:['今日','明日','本周','本月','今年'],
				ranglist3:['today','tomorrow','week','month','year'],
				info:'',
				starimages:[
					{name:'水瓶座',datef:'1.20-2.18',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shuiping_1.jpg',icon:'icon-shuipingzuo'},
					{name:'双鱼座',datef:'2.19-3.20',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shuangyu_1.jpg',icon:'icon-shuangyuzuo'},
					{name:'白羊座',datef:'3.21-4.19',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/baiyang_1.jpg',icon:'icon-muyangzuo'},
					{name:'金牛座',datef:'4.20-5.20',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/jinniu_1.jpg',icon:'icon-jinniuzuo'},
					{name:'双子座',datef:'5.21-6.21',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shuangzi_1.jpg',icon:'icon-shuangzizuo'},
					{name:'巨蟹座',datef:'6.22-7.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/juxie_1.jpg',icon:'icon-juxiezuo'},
					{name:'狮子座',datef:'7.23-8.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shizi_1.jpg',icon:'icon-shizizuo'},
					{name:'处女座',datef:'8.23-9.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/chunv_1.jpg',icon:'icon-chunvzuo'},
					{name:'天秤座',datef:'9.23-10.23',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/tiancheng_1.jpg',icon:'icon-tianchengzuo'},
					{name:'天蝎座',datef:'10.24-11.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/tianxie_1.jpg',icon:'icon-tianhezuo'},
					{name:'射手座',datef:'11.23-12.21',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/sheshou_1.jpg',icon:'icon-sheshouzuo'},
					{name:'摩羯座',datef:'12.22-1.19',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/mojie_1.jpg',icon:'icon-mojiezuo'},
					],
					auditShow:true,
			}
		},
		onLoad(){
			
		},
		onShow() {
			this.getAudit()
		},
				
		methods:{
			left(){
				uni.navigateBack({delta:1})
			},
			
			toinfo(val){
				uni.navigateTo({
					url:"/pages/moreModule/staronfo/staronfo?startype="+val.name
				})
			},
			//获取微信审核开关
			getAudit(){
			    let param = {};
				param.url='v3/system/front/configuration/1'
				this.$request(param).then(res=>{
					this.auditShow=res.data.auditSwitch
					if(this.auditShow){
						uni.setNavigationBarTitle({
							title:'十二星座'
						})
					}
					
				})
			},
			
			getConstellation(){
				if(!this.monthType && !this.consName){
					this.$modal.msg('请选择完整数据！')
					return false
				}
				uni.request({
					url:'https://web.juhe.cn/constellation/getAll',
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method:'GET',
					data:{
						key:'88bffec517da41300a8fa403b5f0f17c',
						consName:this.consName,//关键字
						type:this.monthType1,
					},
					success: (res) => {
					        console.log('res',res);
							this.info=res.data
							
					}
				})
			},
			change1(value){
				this.consName=this.ranglist[value.detail.value]
			},
			change2(value){
				this.monthType=this.ranglist2[value.detail.value]
				this.monthType1=this.ranglist3[value.detail.value]
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		// padding: 20rpx;
		width: 100%;
		text-align: center;
		background-color: #d2dfff;
	}
	 
	
	
	
	
	.constellation{
		padding:0 28rpx 28rpx;
		width: 100%;
		border-radius: 12rpx;
		background-color: #d2dfff;
		.title_box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				align-items: center;
				.left_text{
					font-size: 15px;
					margin-right: 10rpx;
					
				}
				.left_icon{
					width: 15px;
					height: 15px;
					text-align: center;
					line-height: 15px;
					border: 2rpx solid #323333;
					border-radius: 50%;
					
				}
				
			}
		}
		// 星座
	.star_box{
		text-align: center;
		margin-top: 20rpx;
		// background-color: #fff;
		.star_list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.star_item{
				padding: 16rpx 0 ;
				
				.i_cont{
					text-align: center;
					.i_img{
						width: 180rpx;
						height: 180rpx;
						text-align: center;
						line-height: 180rpx;
						border: 2rpx solid #e4f8ff;
						background-color: #d4ebfd;
						border-radius: 30rpx;
						// background-color: rgba(red, green, blue, alpha);
					}
					.i_name{
						padding: 10rpx 0;
						font-size: 28rpx;
						color: #355fa4;
						font-weight: 550;
					}
					.i_date{
						font-size: 24rpx;
						color: #355fa4;
					}
				}
			}
		}
		
	}
	}
	.pick_item{
		width: 500rpx;
		height: 50rpx;
		margin-left: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	.constellation_button{
		width: 700rpx;
		height: 80rpx;
		margin-top: 30rpx;
		background-color: #0982d9;
		border-radius: 12rpx;
		color: #fff;
	}
</style>